<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow    
			:right-text="rightText"
      @click-left="$utils.back($route.path)"     
			@click-right="save"
    />
		<div class="has-top has-bottom">
			<div class="main-div" :style="getStyle(item)" :class="activeIndex === index?'isActive':''" v-for="(item,index) in list" :key="index" @click="activeBtn(item,index)">
					{{item.ProductName}}
			</div>
		</div>
    
		
  
  </div>
</template>

<script>
import { GetStoreProductCategoryList, GetStoreProductList, UpdateStoreProductOrderByByList } from 'api/store'
import { GetStoreProductPage } from 'api/product'
import utils from 'utils/utils'
export default {
  components: {
  },
  data() {
    return {
			type:'', // 管理类型 
      // 初始
      title: '选择商品',
			rightText:'确定',
			list:[
				{
					id:1,
					name:'新西兰牛排',
					isActive:false
				},
				{
					id:2,
					name:'儿童牛排',
					isActive:false
				},
				{
					id:3,
					name:'法国红酒牛排',
					isActive:false
				},
				{
					id:4,
					name:'沙朗牛排',
					isActive:false
				},
			],
			goodparam:{}, //选中的产品信息
			// 请求参数
			requestData: {
        productName: '',
        pageIndex: 1,
        pageSize: 50,
				type: 2
      },
			activeIndex: '',
    }
  },
  created() {
		this.type = this.$route.params.type
		console.log('1111',this.type)
		this.GetStoreProductPage()
  },
  mounted() {
   
  },
  methods: {
		getStyle(item){
				if(item.isActive){
						return {'background-color':'#eb1010','color':'#fff'}
				}
				return {}
		},
		activeBtn(item,index){
				this.activeIndex = index
				let currentState = item.isActive;
				this.list.forEach(el=>{
						el.isActive= false
				})
				item.isActive = !currentState
				console.log('item',item)
				this.goodparam = {
					id:item.ID,
					name:item.ProductName
				}
		},
    save(){
			if (this.type == 'promotion') {
				this.$router.push(`/mealPromotion?goodparams=${JSON.stringify(this.goodparam)}`)
			} else {
				this.$router.push(`/mealPromotion?freeparams=${JSON.stringify(this.goodparam)}`)
			}
			
		},
		// 获取商品列表
    GetStoreProductPage() {
      const _this = this
      _this.requestData.storeId = localStorage.getItem('storeId')
      GetStoreProductPage(_this.requestData).then((res) => {
        if (res) {					
          _this.list = res.Data.Data
        }
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.main-div{
    width: 100%;
		padding: 0 30px;
		height: 64px;
		line-height: 64px;
		overflow: hidden;
		background: white;
		border-radius: 8px;
		color: $color3;
		font-size: 28px;	
		margin-bottom: 2px;	
}
.isActive{
	background-color:#eb1010;
	color:#fff;
}
</style>
